<!--  -->
<template>
  <div class="share">
    <Nav title="分享转发">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- tab选项 -->
    <div class="flex justify-between aligin-center">
      <div class="tab-container">
        <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
      </div>
    </div>
    <div class="scroll-wrapper">
      <Scroll
        :preventDefault="true"
        :click="false"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="productList"
        ref="myScroll"
      >
        <div class="pd-14">
          <template v-if="tabIndex==0">
            <ProductList :productList.sync="productList" @tapProductItem="tapProductItem"></ProductList>
          </template>
          <template v-else>
            <ShopList :shopList.sync="shopList"></ShopList>
          </template>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import TabCommon from "../../components/TabCommon";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import ProductList from "../../components/productList";
import ShopList from "../../components/ShopList";
export default {
  mixins: [Page],
  components: { Nav, TabCommon, ShopList, Scroll, ProductList },
  data() {
    return {
      tabs: ["商品", "店铺"],
      tabIndex: 0,
      shopList: [], //店铺列表
      productList: [] //产品列表
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 商品点击
    tapProductItem(item) {
      this.$router.push({
        name: "productDetail",
        params: {
          id: item.goods_id,
          key: this.activityDetail.key,
          productId: this.$route.params.id
        }
      });
    },
    _api() {},
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
      }
    }
  },
  created() {},
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.productList.push(i);
    }
    for (let i = 0; i < 10; i++) {
      this.shopList.push(i);
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.share {
  height: 100%;
  .pd-14 {
    padding: 14px;
  }
  .scroll-wrapper {
    height: calc(100% - 89px);
    overflow: hidden;
  }
  //tab common
  .tab-container {
    padding: 10px 10px;
    width: 50%;
  }
  .loading-bottom {
    width: 100%;
    text-align: center;
  }
}
</style>